<template>
  <div class="full-screen-min-height bg-white ofy-hidden">
    <!--头部-->
    <Head :head="head" @greet="greet"></Head>
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="1000px"
      center>
      <div class="left_essential base">
        <img src="/static/assets/img/dtx1.png" alt="">
        <p v-for="(c,index) in cs" @click="sorts($event, index, c.t)" v-bind:class="{'visible1':nowIndex == index}" :key="c.index">{{ c.name }}</p>
      </div>
      <div class="right_essential" v-if="temp1 == 1">
        <p>尊敬的{{user}}用户，胸痛质控大家庭感谢您的加入</p>
        <div><p><span>组织</span></p><p><span>个人资料</span></p></div>
        <div><p><span>头像</span><img src="/static/assets/img/logo.png" alt=""></p><p><span>姓名</span>{{user}}</p><p><span>头像</span><img src="/static/assets/img/dtx.png" alt=""></p></div>
        <div><p><span>权限</span>{{user}}</p><p><span>权限</span>{{user}}</p></div>
        <div><p><span>简称</span>{{user}}</p><p><span>职务</span>{{user}}</p><p><span>科室</span>{{user}}></p></div>
        <div><p></p><p><span>手机</span>{{user}}<span class="tip">已绑定</span></p><p><span>邮箱</span>{{user}}<span class="tip">已验证</span></p></div>
      </div>
      <div class="right_essential" v-if="temp1 == 2">
        <p>您的安全服务</p>
        <div><p><span class="width_user">用户名</span>{{user}}</p></div>
        <div><p><span>绑定邮箱</span></p><span class="tip2">修改邮箱</span></div>
        <div><p><span>绑定手机</span>{{user}}</p></div>
        <div><p><span>登录密码</span>{{user}}</p><span class="tip2">修改邮箱</span></div>
      </div>
      <div class="both"></div>
    </el-dialog>
    <el-container class="full-height">
      <el-container direction="vertical" class="right_bgcolor">
        <div class="bgcolor" style="width: 100%; min-height: 100%;background-color:#fff">
        <left-top :active="4"></left-top>
        <!--内容-->
        <el-main class="of-auto">
          <div class="main-container d-flex">
            <div class="flex-full">
              <div class="mt-5">
                <el-row class="bg-white" :gutter="10">
                  <el-col v-for="(item,i) in tabs" :key="i" :xs="12" :sm="12" :md="8" :lg="6">
                    <div @click="goDetail(item)" class="tab-item" :class="item.type == 1 ? (item.id == active ? 'tab-item1-active' : 'tab-item1') : (item.id == active ? 'tab-item2-active' : 'tab-item2')">
                      <img class="mt-28" :src="item.img" width="62" height="62" alt="">
                      <div class="mt-9">{{item.title}}</div>
                      <img v-if="item.recommended" class="tab-item-recommend" width="51" height="51" src="/static/assets/img/supervision/recommend.png" alt="">
                    </div>
                  </el-col>
                </el-row>
              </div>
              <!--底部-->
              <div class="text-16 mt-10" v-show="clickOn">
                <span class="color-blue">概况 </span>
              </div>
              <el-row :gutter="30" v-show="clickOn">
                <el-col :span="16">
                  <div class="height-38 full-width">
                    <chart :options="option" ref="chart" :auto-resize="true" class="chart full-width full-height"></chart>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                    <div class="end-text" style="margin-top: -20px">共 <span class="color-red">71</span>家单位</div>
                    <div class="size-15 fr" style="margin:50px 0">
                        <img src="/static/assets/img/supervision/yijiandudao@2x.png" class="full-height full-width cursor-pointer tr"
                         alt="" @click="sends('')">
                    </div>
                    <div class="both"></div>
                    <div class="end-text" style="margin-bottom:20px">{{endText}}</div>
                    <div style="margin-bottom:10px">已阅读医院数量  <span>50</span></div>
                    <div>已回复医院数量  <span>35</span> <router-link to="/homepage" style="color:#7A8BE7">查看详情</router-link></div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="width-33 position-relative" style="width:300px;">
              <div class="px-10 pt-15" v-show="clickOn">
                <div class="right-title">
                  {{rightTitle}}
                </div>
                <div style="margin:20px 0;">
                  <span class="right-title">主题：</span><span class="right-tip">{{choosedTab.title}}</span>
                </div>
                <div style="margin:20px 0;">
                  <span class="right-title">内容：</span>
                </div>
                <div class="right-tip">
                  {{choosedTab.content.tip}}
                </div>
                <div class="right-content" v-html="choosedTab.content.text"></div>
                <div class="right-tip text-right">
                  <div>{{choosedTab.content.footerText}}</div>
                  <div class="right-content">{{choosedTab.content.footerTime}}</div>
                </div>
              </div>
              <!--<div class="right-end">-->
              <!--{{rightEndText}}-->
              <!--</div>-->
            </div>
          </div>
        </el-main>
        </div>
      </el-container>
    </el-container>

    <el-dialog
      class="foot-center"
      :visible.sync="showDialog"
      width="360px">
      <div class="text-center">
        <img src="/static/assets/img/supervision/fs.png" width="206" height="101" alt="">
        <div class="mt-15 text-16">
          {{dialogText}}
        </div>
      </div>
      <span slot="footer">
        <el-button @click="showDialog = false" type="info" round>取 消</el-button>
        <el-button type="primary" @click="confirmSend" round>确 认</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="foot-center"
      :visible.sync="afterSend"
      width="360px">
      <div class="text-center">
        <img src="/static/assets/img/supervision/sb.png" class="my-20" width="48" height="38" alt="">
        <div class="mt-15 text-16">
          {{dialogSend}}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import model from '@/components/model'
import Table from '@/components/Table'
import Head from '@/components/Head'
import LeftTop from '@/components/Left'
import echarts from 'echarts'
export default {
  name: 'supervision',
  data () {
    return {
      centerDialogVisible: false,
      clickOn: false,
      showDialog: false,
      afterSend: false,
      dialogSend: '邮件发送成功',
      user: '543759843@qq.com',
      nowIndex: 0,
      temp1: 1,
      tempe: 2,
      nowIndex1: 1,
      active: 0,
      cs: [
        {name: '账户资料', t: 1},
        {name: '安全设置', t: 2}
      ],
      head: {
        platform: '江苏省胸痛中心质控管理平台',
        analysis: '督导管理',
        name: '李冰冰 ',
        methods: 'greet'
      },
      name: '名称',
      title: '江苏省胸痛中心-督导管理',
      tabs: [
        {
          title: '无填报记录',
          img: '/static/assets/img/supervision/xkz.png',
          type: 1,
          id: 1,
          content: {
            tip: '尊敬的 xxx 医院',
            text: '<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您好！</span><br>' +
              '<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经系统查询，我中心了解到贵医院已在胸痛中心官网进行注册，但至今仍无填报记录。特此提醒，希望贵医院于百忙之中抽空于胸痛中心总部开始填报工作。</span><br>' +
              '<span>http://www.chinacpc.org/</span><br>' +
              '<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;希望贵医院能对我中心工作予以理解、支持以及配合。感谢！</span><br>' +
              '<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;胸痛中心期待您的早日加入！</span>',
            footerText: '江苏省胸痛质控中心',
            footerTime: '2018-10-22'
          }
        },
        {
          title: '填报不连续',
          img: '/static/assets/img/supervision/st.png',
          type: 1,
          id: 2
        },
        {
          title: '填报量与医院规定不符',
          img: '/static/assets/img/supervision/jidu.png',
          type: 1,
          id: 3
        },
        {
          title: '推荐高质量医院发起认证',
          img: '/static/assets/img/supervision/rz.png',
          type: 2,
          id: 4,
          recommended: true
        },
        {
          title: '未上传《医疗执业机构许可证》',
          img: '/static/assets/img/supervision/jl.png',
          type: 1,
          id: 5,
          content: {
            tip: '尊敬的 xxx 医院',
            text: '<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您好！</span><br>' +
              '<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经系统查询，我中心了解到贵医院已在胸痛中心官网进行注册，但至今仍为上传《医疗许可证》。特此提醒，希望贵医院于百忙之中抽空将《医疗许可证》上传，并将信息补充完整。</span><br>' +
              '<span>http://www.chinacpc.org/</span><br>' +
              '<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;希望贵医院能对我中心工作予以理解、支持以及配合。感谢！</span><br>' +
              '<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;胸痛中心期待您的早日加入！</span>',
            footerText: '江苏省心血管质控中心',
            footerTime: '2018-10-22'
          }
        },
        {
          title: '病因构成比例失调',
          img: '/static/assets/img/supervision/blx.png',
          type: 1,
          id: 6
        },
        {
          title: '指标排名不佳',
          img: '/static/assets/img/supervision/pm.png',
          type: 1,
          id: 7
        },
        {
          title: '指标排名优异',
          img: '/static/assets/img/supervision/yy.png',
          type: 2,
          id: 8,
          recommended: true
        }
      ],
      rightTitle: '督导模版',
      tip: ' 尊敬的 xxx 医院：',
      content: '<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您好！</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经系统查询，我中心了解到贵医院\n' +
        '已在胸痛中心官网进行注册，\n' +
        '但至今仍无填报记录。特此\n' +
        '提醒，希望贵医院于百忙之中\n' +
        '抽空于胸痛中心总部开始填报\n' +
        '工作。http://www.chinacpc.org/。\n</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;希望贵医院能对我中心工作予以理\n' +
        '解、支持以及配合。感谢！</span><br><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;胸痛中心期待您的早日加入！</span>',
      footerText: '江苏省胸痛质控中心',
      footerTime: '2018-10-22',
      endText: '上次督导日期  2018-08-17',
      rightEndText: '注：XXX会自动替换成相应的医院名称',
      option: {
        title: {
          text: '督导单位分布',
          textStyle: {
            color: '#333333',
            fontSize: 16,
            fontWeight: 'normal'
          },
          bottom: 10,
          left: 'center'
        },
        grid: {
          bottom: 70
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: 'transparent'
            }
          },
          axisLabel: {
            color: 'rgba(128, 128, 128, 1)',
            fontSize: 16,
            interval: 0
          },
          data: ['南京', '无锡', '徐州', '南京', '无锡', '徐州', '南京', '无锡', '徐州']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: 'transparent'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(242, 242, 242, 1)'
            }
          },
          axisLabel: {
            color: 'rgba(128, 128, 128, 1)',
            fontSize: 16
          }
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130, 90, 100],
          type: 'bar',
          barWidth: 12,
          itemStyle: {
            barBorderRadius: 10,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#F09D5C'
            }, {
              offset: 1,
              color: '#EB6280'
            }])
          }
        }]
      },
      form: {
        city: 'suzhou',
        province: 'jiangsu',
        hospital: 'all'
      },
      choosedTab: {}
    }
  },
  components: {
    model,
    Table,
    Head,
    LeftTop
  },
  methods: {
    sends (data) {
      this.dialogText = '批量发送邮件到医院'
      this.showDialog = true
      console.log(data)
    },
    greet: function () {
      this.centerDialogVisible = true
    },
    sorts (event, index, t) {
      this.nowIndex = index
      this.temp1 = t
    },
    confirmSend () {
      this.showDialog = false
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
        this.afterSend = true
      }, 1000)
    },
    goDetail (tab) {
      this.clickOn = true
      this.active = tab.id

      var ipcRenderer = window.require('electron').ipcRenderer
      ipcRenderer.send('switch-page', '#/supervision/1?title=' + tab.title)

      if (tab.id === 1 || tab.id === 5) {
        this.choosedTab = tab
        this.option.series[0].data = tab.id === 1? [120, 200, 150, 80, 70, 110, 130, 90, 100]:[80, 20, 110, 90, 120, 140, 60, 100, 80]
      }
      // this.$router.push({name: 'supervisionDetail', params: {id: tab.id}})
    },
    confirmSend () {
      this.showDialog = false
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
        this.afterSend = true
      }, 1000)
    }
  },
  mounted () {
    this.choosedTab = this.tabs[0]
  }
}
</script>

<style scoped>
  /*布局样式*/
  .el-header, .el-footer {
    background-color: #fff;
    color: #1086FD;
    text-align: right;
    line-height: 50px;
  }
  .el-aside {
    background-color: #1484fd;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  /*左侧导航的高度*/
  .el-menu-item, .el-submenu__title{
    height:100px;
    line-height: 30px;
    width: 200px;
    padding-top: 20px;
  }
  /*导航选中状态*/
  li.el-menu-item.is-active {
    color:#fff!important;
    background-color:#0e67d4!important;
  }
  /*内容右边*/
  .main_right_content{
    width: 20%;
    float: left;
  }
  .right_bottom div{
    margin-top: 50px;
    line-height: 25px;
  }
  /*标题*/
  .grad h1{
    float: left;
    line-height: 60px;
    color: #ffff;
    font-size: 25px;
  }
  /*右边图标*/
  .grad img{
    margin-left: 30px;
    margin-top: 38px;
  }
  .left-header{
    background: #822DD7;
    color: white;
    font-size: 28px;
    border-radius: 6px;
  }
  .right-title{
    text-align: center;
    font-size: 20px;
  }
  .right-tip{
    color: rgba(124, 54, 216, 1);
    font-size: 16px;
  }
  .right-content{
    color: rgba(124, 54, 216, 1);
    font-size: 16px;
    line-height: 36px;
  }
  .tab-item{
    width: 100%;
    height: 190px;
    margin: 0 auto;
    margin-bottom: 5px;
    color: #8D3FDA;
    font-size: 15px;
    padding: 0 10px;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    position: relative;
  }
  .tab-item-recommend{
    position: absolute;
    top: 5px;
    left: 3px;
  }
  .tab-item1{
    background-image: url("/static/assets/img/supervision/ds.png");
    background-size:100% 100%;
    background-repeat:no-repeat;
  }
  .tab-item1-active {
    background-image: url("/static/assets/img/supervision/jianji.png");
  }
  .tab-item1:hover{
    background-image: url("/static/assets/img/supervision/jianji.png");
  }
  .tab-item1:hover .tab-item-recommend{
    top: 5px;
    left: 3px;
  }
  .right_bgcolor{
    padding: 20px 20px 20px 0;
    background-color: #f2f2f2;
  }
  .tab-item2{
    background-image: url("/static/assets/img/supervision/tj.png");
    background-size:100% 100%;
    background-repeat:no-repeat;
  }
  .tab-item2:hover .tab-item-recommend{
    top: 5px;
    left: 3px;
  }
  .tab-item2-active {
    background-image: url("/static/assets/img/supervision/jianjizt.png");
  }
  .tab-item2:hover{
    background-image: url("/static/assets/img/supervision/jianjizt.png");
  }
  .end-text{
    color: rgba(122, 139, 231, 1);
    font-size: 16px;
    margin-top: 20px;
  }
  .color-blue{
    color: rgba(16, 134, 253, 1);
  }
  .color-red {
    color: #f195a0;
  }
  .main-container{
    width: 100%;
    /*overflow: hidden;*/
    position: relative;
  }
  .main-right{
    width: 300px;
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
  }
  .main-left{
    margin-right: 300px;
  }
  .el-main{
    min-height: 1000px;
  }
  /*.right-end{*/
    /*position: absolute;*/
    /*font-size: 16px;*/
    /*bottom: 15px;*/
    /*right: 0;*/
  /*}*/
</style>
